<!--
 * @Author: GKN
 * @Date: 2023-08-21 17:08:18
 * @LastEditTime: 2024-01-22 16:23:07
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\case\adminInnovate\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="widthFull" style="height: 238px; " v-if="adimg">
        <adImgView  :src="adimg" />
        <!-- <img class="ad-img" src="https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg" alt=""> -->
    </div>
    <div class="header widthFull flex flex-j-c">
        <div class="flex a-tab1 widthFull flex-j-c flex-align ">
            <div v-for="(item,i) in head_tabs" :key="i" :class="i==head_tab_index?'a-tab-p-active a-tab-p':'a-tab-p'" @click="headtabclick(item,i)">
                <span v-if="i!= 2">{{ item.name }}</span>
                <el-popover
                    v-if="i==2"
                    placement="bottom"
                    popper-class="case-popover"
                    :width="124"
                    trigger="click"
                    :teleported="false"
                    style="z-index: 1000;"
                >
                    <div class="selectView">
                        <div v-for="(item,i) in head_tabs2" :key="i" :class="head_tab_index2 == i?'cursor-p active':'cursor-p'" @click.stop="headtabclick2(i,item)">{{ item }}</div>
                    </div>
                    <template #reference><span>{{ item.name }}</span></template>
                </el-popover>
            </div>
        </div>
    </div>
    <div class="main mainPadding " style="background:#fff;">
        <div class="max-w">
        <div class="m1" v-if="head_tab_index ==0">
            <my-empty v-if="list_notice.length==0" />
            <div class="title" style="text-align: center;">{{ list_notice.length>0?list_notice[0].name:'' }}</div>
            <el-divider />
            <div class="font-content font-MTop12 font-text-al-l">
                <div v-html="list_notice.length>0?list_notice[0].cont:''"></div>
            </div>
            <div class="MarT">
                <fileView :list="list_notice.length>0?list_notice[0].files:[]" :id="list_notice.length>0?list_notice[0].newsId:''" t1="案例征集" t2="征集通知" thumb="cover" />
            </div>
        </div>
        <div class="m1" v-if="head_tab_index ==1">
            <my-empty v-if="list_report.length==0" />
            <div class="title" style="text-align: center;">{{ list_report.length>0?list_report[0].name:'' }}</div>
            <div class="font-content font-MTop12 font-text-al-l">
                <div v-html="list_report.length>0?list_report[0].cont:''"></div>
            </div>
            <el-divider />
            <div class="MarT">
                <fileView :list="list_report.length>0?list_report[0].files:[]" :id="list_report.length>0?list_report[0].newsId:''" t1="案例征集" t2="申报文件" thumb="cover" />
            </div>
        </div>
        <div  v-if="head_tab_index ==2">
            <div class="m1">
                <div class="title" style="text-align: center;">中国工业管理创新优秀成果（名单及案例链接）</div>
            </div>
            <!-- <div class="MarT border-r6 back-fff ad8view">
                <TitleView class="MarT35" title="征集"></TitleView>
                <div class="title omit-2 font-text-al-l zjview" style="margin-top: 38px;">主题与内容：--</div>
                <div class="title omit-2 font-text-al-l zjview">征集要求：--</div>
                <div class="title omit-2 font-text-al-l zjview">编写体例：--</div>
                <div class="title omit-2 font-text-al-l zjview">申报方式：--</div>
                <div class="title omit-2 font-text-al-l zjview">征集时间：--</div>
                <div class="title omit-2 font-text-al-l zjview">宣传展示：--</div>
            </div> -->
            <div class="MarT35">
                <el-table :data="list_gain" stripe style="width: 100%" @row-dblclick="rowDblclick">
                    <el-table-column prop="company" label="单位名称" width="200" header-row-class-name="headn" > </el-table-column>
                    <el-table-column prop="name" label="案例名称" width="300" >
                        <template #default="scope">
                            <span style="color:#d10b00;" class="cursor-p">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user" label="主创人" >
                        <template #default="scope">
                            <span class="cursor-p">{{ scope.row.user }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user" label="参创人" >
                        <template #default="scope">
                            <span class="cursor-p">{{scope.row.joinUser}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div  v-if="head_tab_index ==3" style="padding: 37px 0;">
            <my-empty v-if="list_vote.length==0"/>
            <el-row :gutter="20">
                
                <el-col :span="8" v-for="(item,i) in list_vote" :key="i" >
                    <div class="back-sha-box" style="padding: 35px 31px;margin-bottom: 20px;" @click="goListInfo(item)">
                        <div class="mtitle">
                            <el-row :gutter="20">
                                <el-col :span="8"><div class="p1">申报主题：</div></el-col>
                                <el-col :span="16"><div class="p2 omit">{{ item.themeName||item.name }}</div></el-col>
                            </el-row>
                        </div>
                        <div class="mtitle">
                            <el-row :gutter="20">
                                <el-col :span="8"><div class="p1">申报单位：</div></el-col>
                                <el-col :span="16"><div class="p3 omit">--</div></el-col>
                            </el-row>
                        </div>
                        <div class="mtitle">
                            <el-row :gutter="20">
                                <el-col :span="8"><div class="p1">申报类型：</div></el-col>
                                <el-col :span="16"><div class="p3 omit">{{ item.t3||'--' }}</div></el-col>
                            </el-row>
                        </div>
                        <div class="mtitle">
                            <el-row :gutter="20">
                                <el-col :span="8"><div class="p1">主创人：</div></el-col>
                                <el-col :span="16"><div class="p3 omit">{{ item.company||'--' }}</div></el-col>
                            </el-row>
                        </div>
                        <div class="mtitle">
                            <el-row :gutter="20">
                                <el-col :span="8"><div class="p1">参与人：</div></el-col>
                                <el-col :span="16"><div class="p3 omit">{{ item.coCreator||'--' }}</div></el-col>
                            </el-row>
                        </div>
                        <div class="mtitle">
                            <el-row :gutter="20">
                                <el-col :span="24"><div class="p1">内容概要：</div></el-col>
                            </el-row>
                        </div>
                        <div class="mtitle" style="height: 100px;">
                            <el-row :gutter="20">
                                <el-col :span="24"><div class="p4 omit-4">
                                    {{ item.blurb }}
                                </div></el-col>
                            </el-row>
                        </div>
                        <div class="bom">
                            <div class="p">{{item.p||0}}<span>票</span> </div>
                            <div :class="item.v?'btn2':'btn1 cursor-p'" @click.stop="vote(item)">
                                {{ item.v?'已投票':'投票' }}
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        </div>
    </div>
    
</template>

<script setup>
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import CryptoJS from 'crypto-js';
    import fileImg from './fileImg.vue';
    import TitleView from '../../components/title.vue';
    import { useRoute, useRouter } from "vue-router";
    const Router = useRouter();

    // 导航下对应模块
    const list_children = JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'children').toString(CryptoJS.enc.Utf8)).children
    const first_title = JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'children').toString(CryptoJS.enc.Utf8)).name
    // tab标记id
    const head_tab_index = ref(0)
    const head_tabs = ref(list_children)
    // tab标记name
    const title = ref(list_children[0].name)
    const list_notice = ref([])
    const list_report = ref([])
    const list_gain = ref([])
    const list_vote = ref([])
    // 三级年份
    const head_tab_index2 = ref(0)
    const head_tabs2 = ref([
    {name:'2022年度',v:2022},{name:'2021年度',v:2021},{name:'2020年度',v:2020}
    ])
    const headtabclick = (item,i) =>{
        head_tab_index.value = i
        const id = item.id
        getAd(item.id)
        title.value = item.name
        var pageSize = 1
        var url = ''
        if(i==0){
            pageSize = 1
            url = proxy.$api.caseLIst+'?nextTag=0&nty=2&nid='+id+'&pageSize='+pageSize+'&prevTag=0'
        }else if(i==1){
            pageSize = 1
            url = proxy.$api.caseLIst+'?nextTag=0&nty=3&nid='+id+'&pageSize='+pageSize+'&prevTag=0'
        }else if(i==2){
            pageSize = 100
            url = proxy.$api.caseLIst+'?nextTag=0&nty=1&nid='+id+'&pageSize='+pageSize+'&prevTag=0&year='+head_tabs2.value[head_tab_index2.value]
        }else{
            pageSize = 100
            url = proxy.$api.caseLIst+'?nextTag=0&nty=1&nid='+id+'&pageSize='+pageSize+'&prevTag=0'
        }
        proxy.$http.request(url,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    if(i==0){
                        list_notice.value = res.data.data.list
                    }
                    if(i==1){
                        list_report.value = res.data.data.list
                    }
                    if(i==2){
                        list_gain.value = res.data.data.list
                    }
                    if(i==3){
                        list_vote.value = res.data.data.list
                    }
                // banner_list.value = res.data.data.list
                } 
            }
        })
    }
    const adimg = ref('')
    const getAd=(id)=>{
        proxy.$comJs.getAd(id,0,function(res){
            if(res.list.length >0){
                adimg.value = res.list[0].img   
            }else{
                adimg.value = ''
            }
                     

        })
    }
    headtabclick(list_children[0],0)
    const goListInfo=(item,name)=>{
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:head_tabs.value[head_tab_index.value].name,
                    id:item.newsId,
                    path:'/animatedly/list',
                    first_title:first_title,
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
    
    const headtabclick2 = (i,item) =>{
        head_tab_index2.value = i
        const id = list_children[head_tab_index.value].id
        proxy.$http.request(proxy.$api.caseLIst+'?nextTag=0&nty=1&nid='+id+'&pageSize=20&prevTag=0&year='+item,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    list_gain.value = res.data.data.list
                } 
            }
        })
    }
    const getljhy_tabs=()=>{
        proxy.$http.request(proxy.$api.get_resource,'get',{},false, function (res) {
            if(res&&res.data){
                head_tabs2.value = res.data.data.year
                // getlist_ljhy(ljhy_tabs.value[0])
            }
        })
    }
    getljhy_tabs()
    const file_index = ref(-1)
    const enter=(i)=>{
        file_index.value = i
    }
    const leave=(i)=>{
        file_index.value = -1
    }
    // 预览查看
    const amplify=()=>{

    }
    const rowDblclick =(e)=>{
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:head_tabs.value[head_tab_index.value].name,
                    id:e.newsId,
                    path:'/animatedly/list',
                    first_title:first_title,
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
        // Router.push({
        //     path:'/case/info2',
        //     query:{
        //         year:head_tabs2.value[head_tab_index2.value],
        //         info:JSON.stringify(e),
        //     }
        // });
    }
    const vote = (item)=>{
        proxy.$http.request(proxy.$api.user_vote,'post',{"threeId":item.newsId},true, function (res) {
            if(res&&res.data){
                if(res.data.code == 0){
                    proxy.$comJs.msg('success','投票成功',1)
                }else{
                    proxy.$comJs.msg('error',res.data.msg,1)
                }
            }
        })
    }
</script>

<style lang='less' scoped>
/deep/.el-table tr:first-child th{
    background: #D10B00;
    color: #fff;
}
    .m1{
        background: #fff;
        padding:38px 78px;
        box-sizing: border-box;
        .title{
            font-size: 40px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #D10B00;
            line-height: 50px;
        }
    }
    .header{
        background: #d10b00;
        height: 80px;
    }
    .file-view{
        height: 538px;
        position: relative;
        box-shadow:0 0 10px rgba(5, 5, 5, 0.2);
        .file-mask{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background:rgba(0,0,0,.3) ;
            display: flex;
            justify-content: flex-end;
            padding: 20px 20px 0 0;
        }
    }
    .more{
        width: 56px;
        height: 56px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 6px;
        
        div{
            background: #4a505c;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
    }
    .alView{
        .titleView{
            width: 40px;
            height: 190px;
            // background: #d42c23;
            display: flex;
            align-items: center;
            justify-content: center;
            background:url('@/assets/img/title-tip1.jpg');
            background-size: 100% 100%;
            .t{
                color: #fff;
                width: 20px;
                margin: 0 auto;
                line-height: 26px;
                font-size: 20px;
            }
        }
        .itemView{
            height: 202px;
            background: linear-gradient(to bottom, #fffbf8, #ffe2ce);
            .title{
                font-size: 16px;
                font-weight: bold;
                color: #d42c23;
                line-height: 24px;
            }
            .desc{
                font-size: 14px;
                color: #333;
                line-height: 24px;
            }
        }
    }
    .more1{
    width:180px;
    height: 40px;
    color: #d10b00;
    background: #fff2f1;
    border:1px solid #d10b00;
    border-radius: 6px;
    line-height: 40px;
    margin: 0 auto;
    cursor: pointer;
  }
  .ad8view{
    height: 334px;background: url('@/assets/img/ad8.png');background-size: 100% 100%;
  }
  .zjview{
    font-weight: bold;margin-bottom: 12px;
    padding-left: 168px;
  }
  .selectView{
    width: 124px;
    div{
        font-size: 16px;
        text-align: center;
        margin-bottom: 30px;
    }
    div:last-child{
        margin-bottom: 0;
    }
    .active{
        font-size: 16px;
        text-align: center;
        color:#d10b00 ;
    }
  }
  .mtitle{
    margin-bottom:10px;
    .p1{
        font-size: 16px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        text-align: left;
        color: #8D8D8D;
    }
    .p2{
        font-size: 16px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        text-align: left;
        color: #D10B00;
    }
    .p3{
        font-size: 16px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        color: #333;
        text-align: left;
        font-weight: bold;
    }
    .p4{
        font-size: 16px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        color: #333;
        text-align: left;
        font-weight: 400;
    }
  }
  .bom{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    .p{
        font-size: 24px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        color: #D10B00;
        line-height: 24px;
        margin-right: 20px;
        span{
            font-size: 16px;
            margin-left: 5px;
        }
    }
    .btn2{
        width: 108px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(to bottom, #FF584F, #D10B00);
        border-radius: 20px 20px 20px 20px;
        font-size: 16px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        color: #FFFFFF;
    }
    .btn1{
        width: 108px;
        height: 40px;
        line-height:40px;
        background: #FFFFFF;
        border-radius: 20px 20px 20px 20px;
        font-size: 16px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        color: #D10B00;
    }
  }
</style>

